﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>资讯建议</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no, maximum-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="/css/common.css" />
    <link rel="stylesheet" type="text/css" href="/css/index.css" />
    <link href="/css/jquery.dialogbox.css" rel="stylesheet" />
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="headbg"><a href="/index.html" class="return"></a></div>
            <p>资讯建议</p>
        </div>
        <main>
            <div class="am-alert am-alert-warning" data-am-alert="">
                <!-- <button type="button" class="am-close">×</button>-->
                <p>您的个人资料以及提交的信息我们将严格保密，请放心填写。</p>
            </div>
            <div class="am-container">
                <!--<form class="am-form">-->
                <input type="hidden" id="Unid">
                <div class="am-form-group">
                    <input type="text" class="" id="EnterpriseName" placeholder="被投诉单位">
                </div>

                <div class="am-form-group">
                    <input type="text" class="" id="EnterpriseAddress" placeholder="被投诉单位详细地址">
                </div>

              

                <div class="am-form-group">
                    <input type="text" class="" id="ComplaintPerson" placeholder="投诉人">
                </div>

                <div class="am-form-group">
                    <input type="tel" class="" id="Phone" placeholder="联系电话">
                </div>

                <div class="am-form-group">
                    <input type="text" class="" id="BaiduPoint" placeholder="定位信息" readonly="readonly">
                </div>

                <ul class="am-avg-sm-3 am-thumbnails am-hide" id="pic-show"></ul>

                <div class="am-form-group">
                    <label>投诉内容</label>
                    <textarea class="" rows="5" id="ContentStr"></textarea>
                </div>
                <div class="am-form-group">
                    <label>是否匿名</label>
                    <select id="IsNnonymity"><option value="匿名">匿名<option value="否">否</option></select>
                </div>
                <div>
                    <div class="uploadbox">
                        <label>上传附件</label>
                        <div class="img-btnbox">
                            <div class="show">
                                <div class="picture" style="background-image: url(" ");"></div>
                            </div>
                            <div class="showclick">
                                <input type="file" id="upload" onchange="UploadFile(this)">
                                <label for="upload"></label>
                            </div>
                        </div>
                    </div>
                    <div class="uploadlist">
                        <ul id="FileList"></ul>
                    </div>
                </div>
                <div class="am-form-group">
                    <button onclick="AddComplaintHandling()" class="am-btn am-btn-block am-btn-primary">确认提交</button>
                </div>
                <!--</form>-->
                <div class="dialog-box-title" style="width:80%;margin:auto;display:none;z-index:9999;">
                    <div class="box2">
                        <p class="b_wenzi">
                            <img id="imgInit" src="" />
                        </p>
                    </div>

                </div>
                <div class="layerModel_mask" id="layerModel_mask" style="display:none;" onclick="CancleImg()"></div>
            </div>
        </main>
    </div>
</body>
</html>
<style>
.uploadbox {
position: relative;
font-size: 16px;
width: 90%;
margin: auto;
}

.img-btnbox {
position: absolute;
right:0px;
top:0px;
width: 25px;
height: 25px;
overflow: hidden;
}

.showclick {
position: relative;
cursor: pointer;
color: #888;
background: url("/image/add.png") no-repeat;
background-size: contain;
display: inline-block;
*display: inline;
*zoom: 1;
}

.showclick input {
opacity: 0;
filter: alpha(opacity=0);
cursor: pointer;
width: 100%;
height: 100%;
}

.uploadlist {
width:90%;
margin:10px auto;
font-size:1rem;
}

.uploadlist ul {
}

.uploadlist ul li {
margin-buttom: 10px;
overflow: hidden;
}

.uploadlist ul li span {
float: right;
}

.uploadlist ul li label {
vertical-align: -webkit-baseline-middle;
vertical-align: baseline;
}
    .uploadbtn {
     margin: 0px;
    font-weight: normal;
    background: url(../image/Rectangle.png) no-repeat;
    background-size: 100% 100%;
    text-align: center;
    text-align: -webkit-center;
    border: none;
    color: #fff;
    width: 60px;
    height: 25px;
    margin-left: 10px;
    }
</style>
<script type="text/javascript" src="/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/lib/layer/2.1/layer.js"></script>
<script type="text/javascript" src="/lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript" src="/lib/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/static/h-ui/js/H-ui.js"></script>
<script type="text/javascript" src="/static/h-ui.admin/js/H-ui.admin.js"></script>
<script src="/static/usi/core.js"></script>
<script src="/static/usi/tools.js"></script>
<script src="/js/exif.js"></script>
<script>
    var picValue = "";
    window.onload = function () {
        var locationBaiduPoint = jQuery.usi.core.getURLParam("BaiduPoint");
        $("#BaiduPoint").val(jQuery.usi.core.isNullOrEmpty(locationBaiduPoint) ? "" : locationBaiduPoint);
        jQuery.usi.core.get(ip + "/api/Base/Guid", {}, false, function (data) {
            $("#Unid").val(data.data);
        });
    }
    function UploadFile(e) {
        //var files = e.target.files || e.dataTransfer.files;
        //if (!files.length) return;
        picValue = e.files[0];
        var fileType = picValue.type;
        if (fileType.indexOf("jpg") != -1 || fileType.indexOf("jpeg") != -1 || fileType.indexOf("png") != -1 || fileType.indexOf("mp3") != -1 || fileType.indexOf("mp4") != -1) {
            imgPreview(picValue);
        }
        else {
            layer.alert("附件格式不正确，格式只能为：jpg、jpeg、png、bmp");
        }
    }
    function imgPreview(file) {
        var self = this;
        var Orientation;
        //去获取拍照时的信息，解决拍出来的照片旋转问题
        EXIF.getData(file, function () {
            Orientation = EXIF.getTag(this, 'Orientation');
        });
        // 看支持不支持FileReader
        if (!file || !window.FileReader) return;

        if (/^image/.test(file.type)) {
            // 创建一个reader
            var reader = new FileReader();
            // 将图片2将转成 base64 格式
            reader.readAsDataURL(file);
            // 读取成功后的回调
            reader.onloadend = function () {
                var result = this.result;
                var img = new Image();
                img.src = result;
                //判断图片是否大于100K,是就直接上传，反之压缩图片
                if (this.result.length <= (100 * 1024)) {
                    self.headerImage = this.result;
                    postImg(this.result);
                } else {
                    img.onload = function () {
                        var data = self.compress(img, Orientation);
                        self.headerImage = data;
                        postImg(data);
                    }
                }
            }
        }
    }

    function rotateImg(img, direction, canvas) {
        //最小与最大旋转方向，图片旋转4次后回到原方向
        const min_step = 0;
        const max_step = 3;
        if (img == null) return;
        //img的高度和宽度不能在img元素隐藏后获取，否则会出错
        var height = img.height;
        var width = img.width;
        var step = 2;
        if (step == null) {
            step = min_step;
        }
        if (direction == 'right') {
            step++;
            //旋转到原位置，即超过最大值
            step > max_step && (step = min_step);
        } else {
            step--;
            step < min_step && (step = max_step);
        }
        //旋转角度以弧度值为参数
        var degree = step * 90 * Math.PI / 180;
        var ctx = canvas.getContext('2d');
        switch (step) {
            case 0:
                canvas.width = width;
                canvas.height = height;
                ctx.drawImage(img, 0, 0);
                break;
            case 1:
                canvas.width = height;
                canvas.height = width;
                ctx.rotate(degree);
                ctx.drawImage(img, 0, -height);
                break;
            case 2:
                canvas.width = width;
                canvas.height = height;
                ctx.rotate(degree);
                ctx.drawImage(img, -width, -height);
                break;
            case 3:
                canvas.width = height;
                canvas.height = width;
                ctx.rotate(degree);
                ctx.drawImage(img, -width, 0);
                break;
        }
    }

    function compress(img, Orientation) {
        var canvas = document.createElement("canvas");
        var ctx = canvas.getContext('2d');
        //瓦片canvas
        var tCanvas = document.createElement("canvas");
        var tctx = tCanvas.getContext("2d");
        var initSize = img.src.length;
        var width = img.width;
        var height = img.height;
        //如果图片大于四百万像素，计算压缩比并将大小压至400万以下
        var ratio;
        if ((ratio = width * height / 4000000) > 1) {
            console.log("大于400万像素")
            ratio = Math.sqrt(ratio);
            width /= ratio;
            height /= ratio;
        } else {
            ratio = 1;
        }
        canvas.width = width;
        canvas.height = height;
        //        铺底色
        ctx.fillStyle = "#fff";
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        //如果图片像素大于100万则使用瓦片绘制
        var count;
        if ((count = width * height / 1000000) > 1) {
            console.log("超过100W像素");
            count = ~~(Math.sqrt(count) + 1); //计算要分成多少块瓦片
            //            计算每块瓦片的宽和高
            var nw = ~~(width / count);
            var nh = ~~(height / count);
            tCanvas.width = nw;
            tCanvas.height = nh;
            for (var i = 0; i < count; i++) {
                for (var j = 0; j < count; j++) {
                    tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh);
                    ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);
                }
            }
        } else {
            ctx.drawImage(img, 0, 0, width, height);
        }
        //修复ios上传图片的时候 被旋转的问题
        if (Orientation != "" && Orientation != 1) {
            switch (Orientation) {
                case 6: //需要顺时针（向左）90度旋转
                    rotateImg(img, 'left', canvas);
                    break;
                case 8: //需要逆时针（向右）90度旋转
                    rotateImg(img, 'right', canvas);
                    break;
                case 3: //需要180度旋转
                    rotateImg(img, 'right', canvas); //转两次
                    rotateImg(img, 'right', canvas);
                    break;
            }
        }
        //进行最小压缩
        var ndata = canvas.toDataURL('image/jpeg', 0.1);
        console.log('压缩前：' + initSize);
        console.log('压缩后：' + ndata.length);
        console.log('压缩率：' + ~~(100 * (initSize - ndata.length) / initSize) + "%");
        tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;
        return ndata;
    }

    //上传图片
    function postImg(data) {
        var filecontent = data.split('base64,')[1]
        var paramFile = {
            MainDataUnid: $("#Unid").val(),
            UserUnid: "00000000000000000000000000000000",
            FileContent: filecontent,
            InFileName: picValue.name,
            AliasData: '',
            AliasDataSort: ''
        }
        jQuery.usi.core.post(ip + api + "/UploadSingleFile", { data: jQuery.toJSON(paramFile) }, false, function (data) {
            if (data.success) {
                getfilelist();
            }
        });
    }

    function getfilelist() {
        jQuery.usi.core.get(ip + "/api/Base/FileData", { MainDataUnid: $("#Unid").val(), PageSize: 100, CurrentPage: 1 }, false, function (data) {
            $("#FileList").html("");
            if (data.success) {
                $.each(data.data, function (index, item) {
                    var li = $('<li></li>');
                    var lable = $('<lable>' + item.fullFileName + '</lable>');
                    var span = $('<span></span>');
                    var b1 = $('<button  class="uploadbtn"  size="mini" >查看</button>');
                    b1.bind("click", function () {
                        imgview(item.fullPath);
                    });
                    var b2 = $('<button  class="uploadbtn"  size="mini" >删除</button>');
                    b2.bind("click", function () {
                        deletefile(item.unid);
                    });
                    //span.append(b2);
                    span.append(b1).append(b2);
                    li.append(lable).append(span);
                    $("#FileList").append(li);
                });
            }
        })
    }

    function imgview(path) {
        var adres = "http://192.168.31.177:2000/" + path;
        $("#imgInit").attr("src", adres);
        $(".dialog-box-title").show();
        $(".layerModel_mask").show();
        $(".layerModel_mask").css("background", "rgba(0, 0, 0, 0.6)");

    }
  
    //删除
    function deletefile(unid) {
        jQuery.usi.core.get(ip + "/api/Base/DeleteFile", { unids: unid }, false, function (data) {
            if (data.success) {
                getfilelist();
            }
        })
    }

    function CancleImg() {
        $("#imgInit").attr("src", "");
        $(".dialog-box-title").hide();
        $(".layerModel_mask").hide();
    }

    //提交
    function AddComplaintHandling() {
        var enterpriseName = $("#EnterpriseName").val();
        var enterpriseAddress = $("#EnterpriseAddress").val();
        var isNnonymity = $("#IsNnonymity option:selected").val();
        var complaintPerson = $("#ComplaintPerson").val();
        var phone = $("#Phone").val();
        var contentStr = $("#ContentStr").val();
        var baiduPoint = $("#BaiduPoint").val();
        if (jQuery.usi.core.isNullOrEmpty(enterpriseName)) {
            layer.alert("被投诉单位不能为空");
            return;
        }
        else if (isNnonymity == "否" && jQuery.usi.core.isNullOrEmpty(complaintPerson)) {
            layer.alert("投诉人不能为空");
            return;
        }

        else if (jQuery.usi.core.isNullOrEmpty(phone)) {
            layer.alert("联系电话不能为空");
            return;
        }
        else if (!jQuery.usi.tools.form.regularValidate({ value: phone, type: "Mobile" }).success) {
            alert("联系电话格式不正确！");
            return;
        }
        else if (jQuery.usi.core.isNullOrEmpty(contentStr)) {
            layer.alert("投诉内容不能为空");
            return;
        }

        var obj = {
            Unid: $("#Unid").val(),
            EnterpriseName: enterpriseName,
            EnterpriseAddress: enterpriseAddress,
            IsNnonymity: isNnonymity,
            ComplaintPerson: complaintPerson,
            Phone: phone,
            ContentStr: contentStr,
            BaiduPoint: baiduPoint
        };
        jQuery.usi.core.post(ip + api + "/AddComplaintHandling", { "": jQuery.toJSON(obj) }, false, function (data) {
            if (data.success) {
                alert("提交成功");
                window.location.href = "/index.html";
            }
        }, function (resultdata) {
            layer.alert("提交失败");
        });
    }

</script>
